<template>
  <div id="main"></div>
</template>

<script>
// import { getuserlen } from "../../../network/request.js";

export default {
  props: {
    userlist: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      alluserlist: this.userlist,
      loading: true,
    };
  },
  methods: {
    initlevelview() {
      var chartDom = document.getElementById("main");
      var myChart = this.$echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "user number",
            type: "pie",
            radius: ["40%", "70%"],
            avoidLabelOverlap: false,
            //移入后显示的item样式
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              //中心文字设置
              label: {
                show: true,
                fontSize: "20",
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: this.alluserlist.visiter, name: "游客用户" },
              { value: this.alluserlist.normal, name: "普通用户" },
              { value: this.alluserlist.vip, name: "会员用户" },
              { value: this.alluserlist.disable, name: "禁用" },
            ],
          },
        ],
      };

      option && myChart.setOption(option);
    },
  },
  watch: {
    userlist() {
      if (this.userlist == []) {
        this.loading == true;
      } else {
        this.loading == false;
      }
    },
  },
  mounted() {
    this.initlevelview();
  },
};
</script>

<style scoped>
#main {
  background-color: #fff;
  height: 100%;
  width: 350px;
  margin: auto;
}
</style>